<template>
    <div class="recordC">
        <h1>每日打卡记录</h1>
        <div class="CForm">
            <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
                <el-table-column prop="date1" label="日期" width="120">
                </el-table-column>
                <el-table-column prop="date2" label="时间" width="110">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="phone" label="联系电话" width="130">
                </el-table-column>
                <el-table-column prop="address" label="小区住址" width="130">
                </el-table-column>
                <el-table-column prop="temperature" label="体温（℃）" width="100">
                </el-table-column>
                <el-table-column prop="healthCode" label="健康码" width="100">
                </el-table-column>
                <el-table-column prop="type" label="身体状况" width="130">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<style>
.el-table .warning-row {
  background: #E6A23C;
}

.el-table .danger-row {
  background: #F56C6C;
}
</style>

<script>
export default {
    data() {
        return {
            tableData: []
            // tableData:[{
            //     date1: '',
            //     data2:'',
            //     name: '',
            //     phone:'',
            //     address: '',
            //     temperature:'',
            //     healthCode:'',
            //     type:[]
            // }]
        }
    },
    created() {
        this.tableData.push(JSON.parse(this.$route.query.getC ? this.$route.query.getC : ''))
    },
    methods: {
        // 通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class改变该行的颜色等样式。
        // 通过row.healthCode来获取健康码的颜色来改变该行的颜色等样式
        // 注：样式要写在方法上面
        tableRowClassName({ row, rowIndex }) {
            if (row.healthCode == '黄码') {
                return 'warning-row';
            } else if (row.healthCode == '红码') {
                return 'danger-row';
            }
            return '';
        }
    },
}
</script>

<style scoped>
.recordC {
    padding: 20px;
}

.recordC h1 {
    margin: 0 50px 30px 0;
}

.recordC .CForm {
    margin: 0 auto;
    width: 920px;
}
</style>